<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll</title>
    <script>
        window.onscroll = () => {
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
                document.querySelector('body').style.background = 'DarkViolet';  // 深紫罗兰
            } else {
                // document.querySelector('body').style.background = 'MintCream';  // 薄荷奶油
                document.querySelector('body').style.background = 'Coral';  // 珊瑚
            }
        }
    </script>
</head>
<body>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
<p>this is a line.</p>
</body>
</html>